<layout name="layoutLogin" />

<style type="text/css">
  #loading-mask {
    background-color: white;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 20000;
  }

  #loading {
    height: auto;
    position: absolute;
    left: 45%;
    top: 40%;
    padding: 2px;
    z-index: 20001;
  }

  #loading .loading-indicator {
    background: white;
    color: #444;
    font: bold 13px Helvetica, Arial, sans-serif;
    height: auto;
    margin: 0;
    padding: 10px;
  }

  #loading-msg {
    font-size: 10px;
    font-weight: normal;
  }
</style>

<div id="loading-mask" style=""></div>
<div id="loading">
  <div class="loading-indicator">
    <img src="{$uri}Public/Images/loader.gif" width="32" height="32"
      style="margin-right: 8px; float: left; vertical-align: top;" />
    欢迎使用{$productionName}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <br /> <span id="loading-msg">正在加载中，请稍候...</span>
  </div>
</div>

<script src="{$uri}Public/ExtJS/ext-all.js" type="text/javascript"></script>
<script src="{$uri}Public/ExtJS/ext-lang-zh_CN.js" type="text/javascript"></script>
<script src="{$uri}Public/Scripts/PSI/Const.js?dt={$dtFlag}" type="text/javascript"></script>

<link href="{$uri}Public/Content/foundation/foundation.min.css" rel="stylesheet" type="text/css" />
<link href="{$uri}Public/Content/foundation/app.css" rel="stylesheet" type="text/css" />

<div class="top-bar">
  <div class="top-bar-left">
    <ul class="menu">
      <li class="menu-text"><span style="font-size: 1.5em">{$productionName}</span></li>
    </ul>
  </div>
  <div class="top-bar-right">
    <ul class="menu">
      <li><a href="https://gitee.com/crm8000/PSI" target="_blank"><span style="font-size: 1em">官网</span></a></li>
      <li><a href="{$uri}Home/Help/index?t=login" target="_blank"><span style="font-size: 1em">帮助</span></a></li>
    </ul>
  </div>
</div>

<br />

<div class="row">
  <div class="large-8 columns">
    <img src="{$uri}Public/Images/background.png" style="width: 100%; hegiht: 100%" />
  </div>

  <div class="large-4 columns">
    <div style="margin: 50px 0 0 0">
      <form>
        <div class="row">
          <div class="small-3 columns">
            <label for="editLoginName" class="text-right middle">登录名</label>
          </div>
          <div class="small-9 columns">
            <input type="text" id="editLoginName">
          </div>
        </div>
        <div class="row">
          <div class="small-3 columns">
            <label for="editPassword" class="text-right middle">密码</label>
          </div>
          <div class="small-9 columns">
            <input type="password" id="editPassword">
          </div>
        </div>
        <div class="row">
          <div class="small-3 columns">&nbsp;</div>
          <div class="small-6 columns">
            <a href="#" class="button expanded psi_secondary" id="buttonOK">登&nbsp;&nbsp;录</a>
          </div>
          <div class="small-3 columns">&nbsp;</div>
        </div>
      </form>
    </div>

    <div class="callout alert" id="divInfoCallout" style="display: none" data-closable>
      <div id="divInfo"></div>
    </div>

    <div class="callout warning" id="divDemoWarning">{$demoInfo}</div>
  </div>
</div>

<footer>
  <div class="row">
    <div class="large-3 columns">&nbsp;</div>
    <div class="large-6 columns">
      <span style="font-size: 0.8em">Copyright &copy; 2015-{$year}
        PSI Team, All Rights Reserved</span>
    </div>
    <div class="large-3 columns">&nbsp;</div>
  </div>
</footer>

<script type="text/javascript">
  Ext.onReady(function () {
    PSI.Const.BASE_URL = "{$uri}";

    if ("{$demoInfo}" == "") {
      Ext.get("divDemoWarning").remove();
    }

    var editLoginName = document.getElementById("editLoginName");
    var editPassword = document.getElementById("editPassword");
    var loginName = Ext.util.Cookies.get("PSI_user_login_name");
    if (loginName) {
      editLoginName.value = decodeURIComponent(loginName);
      editPassword.focus();
    } else {
      editLoginName.focus();
    }

    editLoginName.onkeydown = function (e) {
      if (e.keyCode == 13) {
        editPassword.focus();
      }
    };
    editPassword.onkeydown = function (e) {
      if (e.keyCode == 13) {
        doLogin(editLoginName.value, editPassword.value);
      }
    }
    document.getElementById("buttonOK").onclick = function () {
      doLogin(editLoginName.value, editPassword.value);
    }

    Ext.get("loading").remove();
    Ext.get("loading-mask").remove();
  });

  function doLogin(loginName, password) {
    if (!loginName) {
      showInfo("没有输入登录名");
      setInputFocus();
      return;
    }
    if (!password) {
      showInfo("没有输入密码");
      setInputFocus();
      return;
    }

    var r = {
      url: PSI.Const.BASE_URL + "Home/User/loginPOST",
      method: "POST",
      params: {
        loginName: loginName,
        password: password
      },
      callback: function (options, success, response) {
        if (success) {
          var data = Ext.JSON.decode(response.responseText);
          if (data.success) {
            setLoginNameToCookie(loginName);

            var returnPage = "{$returnPage}";
            if (returnPage) {
              location.replace(returnPage);
            } else {
              location.replace(PSI.Const.BASE_URL);
            }
          } else {
            showInfo(data.msg);
            setInputFocus();
          }
        }
      }
    };

    Ext.Ajax.request(r);
  }

  function setInputFocus() {
    var editLoginName = document.getElementById("editLoginName");
    var editPassword = document.getElementById("editPassword");
    if (editLoginName.value) {
      editPassword.focus();
    } else {
      editLoginName.focus();
    }
  }

  function showInfo(info) {
    document.getElementById("divInfoCallout").style.display = "";
    document.getElementById("divInfo").innerHTML = info;
  }

  function setLoginNameToCookie(loginName) {
    loginName = encodeURIComponent(loginName);
    var dt = Ext.Date.add(new Date(), Ext.Date.YEAR, 1)
    Ext.util.Cookies.set("PSI_user_login_name", loginName, dt);
  }
</script>
